<template>
  <div>
    <div class="btn1" style="position: absolute;left:875px;top:165px;z-index:1000;">
        <el-button 
        icon="el-icon-arrow-left" 
        circle 
        v-on:click="change('pre')"
        ></el-button>
    </div>
    <div ref="piedata" style="background-color: rgb(243, 234, 234);height: 340px;border-radius:25px;"></div>
    <div class="btn2" style="position: absolute;right:215px;top:165px">
      <el-button 
      icon="el-icon-arrow-right" 
      circle 
      v-on:click="change('back')"
      ></el-button>
    </div>
    <div class="cate" style="position: absolute;right:500px;top: 285px;">
      <h3 style="color:#696969;">{{ this.piedata[this.curindex].name }}类</h3>
    </div>
  </div>
</template>

<script>
export default {
    name:'piedata',
    data(){
      return {
        piedata:[
          {
            name:'水果',
            children:[
              {
                name:'苹果',
                value:76689
              },
              {
                name:'香蕉',
                value:81923
              },
              {
                name:'葡萄',
                value:26862
              },
              {
                name:'芒果',
                value:97183
              },
              {
                name:'桃子',
                value:30016
              }
            ]
          },
          {
            name:'水产',
            children:[
              {
                name:'鱼干',
                value:7282
              },
              {
                name:'蛤蜊',
                value:4191
              },
              {
                name:'三文鱼',
                value:9009
              },
              {
                name:'海星',
                value:1282
              }
            ]
          },
          {
            name:'干货',
            children:[
            {
                name:'葡萄干',
                value:76689
              },
              {
                name:'鱿鱼丝',
                value:81923
              },
              {
                name:'灰枣',
                value:26862
              },
              {
                name:'干龙眼',
                value:97183
              },
              {
                name:'xx',
                value:30016
              }
            ]
          }
        ],
        curindex:0
      }
    },
    methods:{
      change(params){
        if(params=='pre') if(this.curindex===0) this.curindex = 2; else this.curindex--
        else if(this.curindex===2) this.curindex=0; else this.curindex++
        this.initcharts()
      },
      initcharts(){
        this.chartInstance = this.$echarts.init(this.$refs.piedata)
        const initOption = {
          title:{
            text:'商品销售占比',
            left: 20,top: 20,
            textStyle:{
              color: '#000'
            },
          },
          legend:{
            left:230,top: '15%',
            icon: 'circle'
          },
          tooltip:{
            show:true,
          },
          grid:{
            
	        },
          series:[
            {
              type: 'pie',
              label:{
                show: false
              },
              emphasis:{
                label:{
                  show:true
                },
                labelLine: {
                  show: false
                }
              }
            }
          ]
        }
        this.chartInstance.setOption(initOption)
        const seriesData = this.piedata[this.curindex].children.map(item => {
          return {
            name:item.name,
            value:item.value,
            label:{
              show: false,
            }
          }
        })
        const legendArr = seriesData.map(item => {
          return item.name
        })
        const dataOption = {
          legend:{
            data:legendArr,
            top: '2%',
          },
          series:[
            {
              data:seriesData
            }
          ]
        }
        this.chartInstance.setOption(dataOption)
      }
    },
    mounted(){
      this.initcharts()
      /* setTimeout(function () {
        if(this.curindex>=0&&this.curindex<2)  {this.curindex++;console.log(this.curindex);}
        else 
          if(this.curindex!==0)  { this.curindex--;console.log(this.curindex);}
      }, 3000); */
    }
}
</script>

<style>

</style>